<template>
  <div :style="nodeData.style" @mousedown="handleMouseDown" class="box">
    <svg
      :preserveAspectRatio="keepProportions ? 'xMidYMid meet' : 'none'"
      viewBox="0 0  100 100"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        :style="{
          fill: nodeData.currentStyle.fill,
          stroke: nodeData.currentStyle.stroke,
          strokeWidth: nodeData.currentStyle.strokeWidth
        }"
        d="M 0 100 L 30 40 L 70 40 L 100 100 Z"
      ></path>
      <circle
        cx="50"
        cy="41"
        r="40"
        :style="{
          fill: nodeData.currentStyle.fill,
          stroke: nodeData.currentStyle.stroke,
          strokeWidth: nodeData.currentStyle.strokeWidth
        }"
      ></circle>
    </svg>
  </div>
</template>
<script>
import mixin from './mixin'
export default {
  name: 'TestCom6',
  mixins: [mixin],
  data() {
    return {
      keepProportions: true,
      nodeData: {
        shape: 'TestCom6', //节点名称，不能重复,必须要跟组件名称一致，不然找不到组件导入
        //节点数据
        text: '测试组件',
        createNodeDescribe: true,
        // 普遍样式
        currentStyle: {
          fill: '#fff',
          stroke: '#000',
          strokeWidth: 3
        },
        isDropEnd: false,
        width: 100,
        height: 100,
        // 其他样式
        style: {}
      }
    }
  },
  mounted() {},
  methods: {
    createPort() {
      // 特殊组件内部重写
      if (this.linkPort && this.node) {
        this.node.addPorts([
          {
            id: 'port1',
            group: 'bottom',
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: '#5B8FFA',
                strokeWidth: 1,
                fill: '#fff',
                cy: -3
              }
            }
          },
          {
            id: 'port2',
            group: 'top',
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: '#5B8FFA',
                strokeWidth: 1,
                fill: '#fff',
                cy: 5
              }
            }
          },
          {
            id: 'port3',
            group: 'left',
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: '#5B8FFA',
                strokeWidth: 1,
                fill: '#fff',
                cx: 5
              }
            }
          },
          {
            id: 'port4',
            group: 'right',
            attrs: {
              circle: {
                r: 3,
                magnet: true,
                stroke: '#5B8FFA',
                strokeWidth: 1,
                fill: '#fff',
                cx: -6
              }
            }
          }
        ])
      }
    }
  }
}
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  cursor: move;
  svg {
    width: 100%;
    height: 100%;
  }
}
</style>
